<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp" %>
<!DOCTYPE HTML>
<html ng-app>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <title>${title}</title>
    <%@ include file="/WEB-INF/jsp/commons/meta.jsp" %>
    <link href="${ctx}/resources/new/style.css" type="text/css" rel="stylesheet"/>

</head>
<body>
<link href="${ctx}/resources/css/print.css" type="text/css" rel="stylesheet"/>
<div class="well">
    <div class="container form-horizontal">
        按箱打印，请输入箱码内部编号：
        <input id="innerNum" type="text">
        <span id="boxSearch" class="btn">查 询</span>
        <span id="clearBtn" class="btn">清 空</span>
        <span id="printBtn" class="btn btn-primary">打印二维码</span>
    </div>
    <div class="container"></div>
</div>
<div class="well">
    <div class="form-horizontal border" style="background-color: #FFFFFF; margin-bottom: 12px; margin-top: 12px;">
        <div id="qrDiv">
            <div class="qr box">
                <img id="boxImg" src="" class="goods">
                <span id="boxNum"></span>

                <div class="qrText">
                    b.箱码
                    <br/>
                    g.商品二维码
                    <br/>
                    i.商品积分码
                    <br/>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="qrClone" class="hide">
    <div class="qr">
        <img src="" class="goods">
        <span goods></span>
        <img src="" class="integral">
        <span integral></span>
    </div>
</div>
<script src="${ctx}/resources/js/jquery.PrintArea.js" type="text/javascript"></script>
<script>
    $(function () {
        var printAble = false;
        $("#printBtn").click(function () {
            if (printAble) {
                $("#qrDiv").printArea();
            }
        });
        $("#clearBtn").click(function () {
            printAble = false;
            $("#qrDiv .qr:not(.box)").remove();
            $("#boxImg").removeAttr("src");
            $("#boxNum").html("");
        });
        $("#boxSearch").click(function () {
            $("#clearBtn").click();
            var innerNum = $.trim($("#innerNum").val());
            if (innerNum) {
                $.post("${ctx}/adoms/qrBoxCode/queryByInner", {
                    innerNum: innerNum
                }, function (data) {
                    if (!data)
                        return;
                    $("#boxImg").attr("src", "${ctx}/adoms/qrGoodsCode/qrImg?qr=" + data.qrCode);
                    $("#boxNum").html("b." + data.wCode);
                    $.post("${ctx}/adoms/qrGoodsCode/printByBox", {
                        boxId: data.id
                    }, function (data) {
                        var goodsList = data.goodsList;
                        $.each(goodsList, function (i, goods) {
                            var goodsDiv = $("#qrClone .qr").clone();
                            $(".goods", goodsDiv).attr("src", "${ctx}/adoms/qrGoodsCode/qrImg?qr=" + goods.qrCode);
                            $(".integral", goodsDiv).attr("src", "${ctx}/adoms/qrGoodsCode/qrImg?qr=" + goods.iCode);
                            $("[goods]", goodsDiv).html("g." + goods.wCode);
                            $("[integral]", goodsDiv).html("i." + goods.iCode);
                            $("#qrDiv").append(goodsDiv);
                        });
                        printAble = true;
                    }, "json");
                }, "json");
            }
        });
    });
</script>
</body>
</html>